<template>
  <div class="product-detail">
    <div :class="['base', 'block']">
      <div class="title">{{ productInfo.desc }}</div>
      <div class="tags">
        <van-tag
          plain
          v-for="(item, index) in productInfo.tags"
          :key="index"
          color="#FF7002"
        >{{ item }}</van-tag>
      </div>
      <div class="content">{{ productInfo.draft }}</div>
    </div>

    <div :class="['teacher', 'block']">
      <div class="title">导师介绍</div>

      <div class="brief">
        <van-image round width="50px" height="50px" :src="productInfo.teacherPicture" />
        <div class="info">
          <div class="name">{{ productInfo.teacher }}</div>
          <div class="desc">{{ productInfo.teacherJob }}</div>
        </div>
      </div>

      <div class="content">{{ productInfo.teacherDes }}</div>
    </div>

    <div :class="['suit', 'block']">
      <div class="title">适合人群</div>
      <div class="content">{{ productInfo.suit }}</div>
    </div>

    <div :class="['notice', 'block']">
      <div class="title">课程须知</div>
      <div class="content" v-html="productInfo.des" />
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { Tag, Image as VanImage } from 'vant'

Vue.use(Tag).use(VanImage)

export default {
  data() {
    return {
      productInfo: {}
    }
  },

  mounted() {
    this.fetch()
  },

  methods: {
    fetch() {
      this.productInfo = {
        desc: '课程介绍不超过十个字',
        tags: ['热点文章', '热点文章', '热点文章', '热点文章'],
        draft:
          'Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师Java架构师',
        teacherPicture: '',
        teacher: '马士兵',
        teacherJob: '京东Java架构师',
        teacherDes:
          '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继有70%的人选择了继续国内深造有20%的人选择了留学，有70%的人选择了继有70%的人选择了继续国内深造。',
        suit: '有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学。',
        des: '<p>有20%的人选择了留学，有70%的人选择了继续国内深造有20%的人选择了留学。</p>'
      }
    }
  }
}
</script>

<style lang="less" scoped>
.product-detail {
  padding: 25.5px 17px;
  min-height: 360px;

  .block {
    .title {
      font-weight: 500;
      font-size: 17px;
      color: #333333;
    }

    .content {
      font-size: 13px;
      color: #666666;
      margin-top: 10px;
      line-height: 22px;
    }
  }

  .teacher, .suit, .notice {
    margin-top: 33px;
  }

  .base {
    .tags {
      margin-top: 10.5px;
      margin-bottom: 3.5px;

      > * {
        margin-right: 5.5px;
        background-color: rgba(0, 0, 0, 0);
      }
    }
  }

  .teacher {
    .brief {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .info {
        margin-left: 14px;

        .name {
          font-size: 14px;
          color: #333333;
        }

        .desc {
          color: #4586FF;
          font-size: 13px;
          margin-top: 5px;
        }
      }
    }
  }

  .notice {
    .content {
      p {
        margin: 0;
      }
    }
  }
}
</style>